<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>化妆点评</title>
<link rel="stylesheet" href="static/css/common.css">
<style type="text/css">
.header {
	width: 100%;
	padding: 0;
	background-color: #f6f6f6;
}
.site-nav {
	height: 36px;
	z-index: 200;
	font-family: Tahoma, sans-serif, Microsoft YaHei;
}
.site-nav .container, .page-header .container, .main-nav .container {
	width: 1020px;
	margin: 0 auto;
	position: relative;
}
.banner {
	height: 100px;
	background-color: #7d7d7d;
}
.logo {
	float: left;
	width: 115px;
	height: 38px;
	margin-top: 24px;
	background-color: pink;
}
.page-header {
	clear: both;
	height: 80px;
}
.page-header .search-box {
	float: left;
	margin-left: 150px;
	margin-top: 20px;
	width: 474px;
} 
.page-header .search-bar {
	position: relative;
	border: 2px solid rgb(255,114,0);
}
.page-header .search-bar input {
	width: 400px;
	height: 16px;
	font-size: 14px;
	padding: 10px 60px 10px 10px;
	border: 0;
}
.page-header .search-bar .search-btn {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
}
.icon {
	margin: 10px 16px;
}
.page-header .i-search {
	width: 19px;
	height: 18px;
}

.main-nav {
	height: 39px;
	line-height: 40px;
	background-color: rgb(255,114,0);
}
.channel-nav a {
	color: #ffffff;
	font-size: 16px;
	padding: 0 25px;
}

</style>
</head>
<body id="top">
	<div class="header">
		<div id="site-nav" class="site-nav">
			<div class="container">
				<div class="left">
					<a class="left item" href="">我的点评</a>
					<a class="left item" href="">我的收藏</a>
					<a class="left item" href="">我的</a>
					<a class="left item" href="">我的</a>
				</div>
				<div class="right">
					<a class="left item" href="">我的</a>
					<a class="left item" href="">我的</a>
					<a class="left item" href="">我的</a>
					<a class="left item" href="">登出</a>
				</div>
			</div>
		</div>
	</div>
	
	<div class="banner">
		<div style="text-align: center;font-size:64px;">I am banner!</div>
	</div>
	
	<div class="page-header">
		<div class="container">
			<a class="logo" href="">Logo</a>
			<div class="search-box">
				<div class="search-bar">
					<input type="text" />
					<a class="search-btn">
						<i class="icon i-search"></i>
					</a>
				</div>
			</div>
		</div>
	</div>
	<div class="main-nav">
		<div class="container">
			<div class="channel-nav">
				<a href="">首页</a>
				<a href="">分类</a>
				<a href="">品牌</a>
				<a href="">社区</a>
			</div>
		</div>
	</div>
</body>
</html>